<template>
  <div class="byd_header" id="top">
    <!-- 我是导航栏 -->
    <div class="container">
      <div class="nav_header">
        <!-- 左导航栏 -->
        <div class="nav_left">
          <!-- 定位 -->
          <!-- <div class="nav_location">
            <i class="el-icon-location-information localtion-icon"></i>
            <span class="location">北京</span>
          </div> -->

          <!-- logo -->
          <div class="nav_logo" style="padding-top: 16px">
            <router-link class="link" to="/">
              <img
                width="140px"
                height="50px"
                src="../../public/pic/logo/6.png"
                alt=""
              />
            </router-link>
          </div>

          <!-- 导航菜单 -->
          <!-- 导航激活颜色: #00b1a9 -->
          <div class="nav_main">
            <el-menu
              router
              :default-active="this.$route.path"
              height="80"
              class="el-menu-demo"
              mode="horizontal"
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#00b1a9 "
            >
              <el-menu-item style="margin-left: 50px" index="/indexmain">
                首页
              </el-menu-item>

              <el-menu-item index="/details/cardetails">
                整车选购
              </el-menu-item>

              <el-menu-item index="/bydlocation"> 预约试驾 </el-menu-item>
              <el-menu-item index="/rider/bydring"> 车友圈 </el-menu-item>
            </el-menu>
          </div>
        </div>

        <!-- 右导航栏 -->
        <div class="nav_right">
          <!-- 搜索栏 -->
          <div class="nav_search">
            <div class="search_area">
              <input
                @keyup.enter="search"
                v-model="input"
                class="input"
                type="text"
                placeholder="请输入内容..."
              />

              <div class="icon" @click="search">
                <i class="el-icon-search icon2"></i>
              </div>
            </div>
          </div>

          <!-- 注册,登录 -->
          <div v-if="!phone">
            <el-menu
              router
              class="el-menu-demo"
              mode="horizontal"
              background-color="#545c64"
              text-color="#fff"
            >
              <el-menu-item index="/login"> 登录 / 注册 </el-menu-item>
            </el-menu>
          </div>
          <!-- 登录之后显示头像电话 -->
          <div
            v-else
            style="display: flex; justify-content: center; align-items: center"
          >
            <img
              :src="require(`../assets/header_pic/header${this.pic}.jpg`)"
              alt=""
              style="width: 50px; border-radius: 50%; margin: 0 10px"
            />
            <p style="color: white">
              <span style="display: block">{{
                phone.replace(/(\d{3})(\d{4})(\d{4})/, "$1****$3")
              }}</span>
              <span style="font-size: 12px">
                <span
                  style="margin-right: 10px; cursor: pointer"
                  @click="goCentre"
                  >个人中心</span
                >
                <span @click="logOut">退出</span>
              </span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/javascript">
window._AMapSecurityConfig = {
  securityJsCode: "6082948bb07a123de87fc03d5f2829fe",
};
</script>
<script src="https://webapi.amap.com/loader.js"></script>

<script>
// 引入post传参组件
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      pic: 6,
      phone: "",
      input: "",
    };
  },
  created() {
    this.save();
  },
  inject: ["reload"],
  methods: {
    ...mapMutations(["getPhone", "getPic", "getSearch", "logOut"]),

    save() {
      this.phone = sessionStorage.getItem("phone");
      this.pic = sessionStorage.getItem("pic");
    },
    // 搜索功能
    search() {
      sessionStorage.setItem("search", this.input.trim());
      if (this.$route.path == "/carlist") {
        window.location.reload();
      } else {
        // 跳转列表页
        this.$router.push("/carlist");
      }
    },
    // 跳转个人中心
    goCentre() {
      if (this.$route.path == "/centre/collet") {
        return;
      } else {
        this.$router.push("/centre");
      }
    },
  },
};
</script>

<style scoped>
/* 背景色 */
.byd_header {
  background-color: #545c64;
  user-select: none;
}

/* 版心 */
.container {
  width: 1200px;
  margin: 0 auto;
}
.nav_header {
  display: flex;
  justify-content: space-between;
}
.nav_left,
.nav_right {
  display: flex;
  background-color: #545c64;
}
.byd_header .index {
  background-color: #545c64;
}

/* 搜索框 */

.nav_search {
  width: 300px;
  height: 48px;
  border-radius: 48px;
  margin: 16px 16px 0 0;
  position: relative;
  overflow: hidden;
}
.search_area {
  position: absolute;
  right: 0;
  width: 50px;
  height: 100%;
  /* background-color: green; */
  transition: 1.5s width;
  display: flex;
  overflow: hidden;
}
.search_area:hover {
  width: 200px;
}
.input {
  width: 200px;
  border-radius: 55px;
  border: transparent;
  outline: none;
  padding: 0 0 0 20px;
  color: #545c64;
}
.icon {
  position: absolute;
  right: 0;
  height: 48px;
  width: 48px;
  background-color: white;
  border-radius: 50%;
  text-align: center;
  line-height: 48px;
  color: #545c64;
  font-size: 23px;
}

.icon:hover {
  background-color: #545c64;
  transition: 2s background-color, 2s color;
  color: white;
}

.el-menu--horizontal > .el-menu-item {
  height: 80px !important;
  line-height: 80px !important;
  font-size: 18px;
  padding-left: 25px;
  padding-right: 25px;
}
.el-menu {
  border-bottom: #545c64 !important;
}
</style>

<style>
.el-menu--horizontal > .el-submenu .el-submenu__title {
  height: 80px !important;
  /* margin-top: 30px !important; */
  line-height: 80px !important;
}
</style>
